<template>
    <el-calendar ref="calendar" v-model="value">
        <template #header="{ date }" class="calendar-header">
            <span>我的日历</span>
            <span>{{ date }}</span>
            <el-button-group>
                <el-button size="small" @click="selectDate('prev-year')">
                    上一年
                </el-button>
                <el-button size="small" @click="selectDate('prev-month')">
                    上一月
                </el-button>
                <el-button size="small" @click="selectDate('today')">今天</el-button>
                <el-button size="small" @click="selectDate('next-month')">
                    下一月
                </el-button>
                <el-button size="small" @click="selectDate('next-year')">
                    下一年
                </el-button>
            </el-button-group>
        </template>
        <template #data-cell="{ data }">
            <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day }}
            </p>
        </template>
    </el-calendar>
</template>
<script lang="ts" setup>
import type { CalendarDateType } from 'element-plus';
import type { CalendarInstance } from 'element-plus/lib/components/index.js';
import { ref } from 'vue';
const calendar = ref<CalendarInstance>()
const value = ref(new Date())
const selectDate: any = (val: CalendarDateType) => {
    if (!calendar.value) return
    calendar.value.selectDate(val)
}
</script>
<style lang="scss" scoped>
:deep(.el-calendar__header) {
    color: #1989fa;
}

:deep(.el-calendar-table) {
    .is-selected {
        .el-calendar-day {
            color: #1989fa;
        }
    }

    .el-calendar-day {
        color: black;
    }
}
</style>